<template>
  <div class="mainLeft">
    <Menu :theme="theme" :accordion="true" :active-name="activeName" :open-names="[openName]" @on-select="changePage"
          ref="leftMenu">
      <div class="nav-item" v-for="item in menuList">
        <!-- 无子菜单 -->
        <MenuItem :name="item.id" v-if="item.children.length===0 && item.hidden" :key="item.id">
          <Icon :type="item.icon"></Icon>
          {{item.name}}
        </MenuItem>
        <!-- 有子菜单 -->
        <Submenu :name="item.id" v-if="item.children.length!==0 && item.hidden">
          <template slot="title">
            <Icon :type="item.icon"></Icon>
            {{item.name}}
          </template>
          <MenuItem :name="child.id" v-for="child in item.children" :key="child.id">{{child.name}}</MenuItem>
        </Submenu>
      </div>
    </Menu>
  </div>
</template>
<script type='text/ecmascript-6'>


  export default {
    data() {
      return {
        localUser:'',

        theme: 'light',//light   dark   primary
        navList: [
          {
            id: '001',
            name: '菜单一',
            icon: 'ios-paper',
            url: '/index',
            hidden:true,
          },
          {
            id: '001001',
            name: '1-1',
            url: '/a1',            
          },
                    {
            id: '001002',
            name: '1-1',
            url: '/a2',            
          },
          {
            id: '002',
            name: '菜单二 -- 框架组件',
            icon: 'briefcase',
            hidden:true,
          },
          {
            id: '002001',
            name: '菜单',
            url: '/a3',            
          },
          {
            id: '002002',
            name: '侧边栏',
            url: '/a1',            
          },
          {
            id: '003',
            name: '菜单三 -- 内容组件',
            icon: 'ios-people',
            hidden:true,
          },
          {
            id: '003001',
            name: '轮播',
            url: '/subjectmain'
          },
          {
            id: '003002',
            name: '文章',
            url: '/a2'
          },
          {
            id: '003003',
            name: '图文上传',
            url: '/uploadview'
          },
          {
            id: '004',
            name: '菜单四 -- 模块组件',
            icon: 'ios-people',
            hidden:true,
          },
          {
            id: '005',
            name: '菜单四 -- 组件模板',
            icon: 'ios-people',
            hidden:true,
          },
          {
            id: '005001',
            name: '组件管理',
            url: '/assembly'
          },
          {
            id: '005002',
            name: '添加组件',
            url: '/assembly'
          },
          {
            id: '005003',
            name: 'SVG绘图测试',
            url: '/svgpage'
          },
        ],

        menuList: [],

        activeName: '',//激活的菜单
        openName: '',//展开的Submenu
      }
    },
    computed: {},
    created() {

      // console.log(this.navList)
      this.dealNavList(this.navList);
      // if (sessionStorage.getItem('activeName')) {
      //   this.activeName = sessionStorage.getItem('activeName')
      // } else {
      //   this.activeName = this.menuList[0].id;
      // }
      // if (sessionStorage.getItem('openName')) {
      //   this.openName = sessionStorage.getItem('openName')
      // } else {
      //   this.openName = this.menuList[0].id;
      // }
    },
    mounted() {
      //手动更新激活的菜单与subMenu
      this.$nextTick(() => {
        this.$refs.leftMenu.updateOpened();
        this.$refs.leftMenu.updateActiveName();
      })
    },
    methods: {
      //页面跳转
      changePage(name) {
          console.log(name);
        this.activeName = name;
        if (name === '001') {
          this.openName = '';
        } else {
          this.openName = name.slice(0, 3);
        }
        sessionStorage.setItem('activeName', this.activeName);
        sessionStorage.setItem('openName', this.openName);
        this.navList.forEach((i) => {
          if (name === i.id) {
            if (i.url) {
              this.$router.push({
                path: i.url
              })
            }
            if(i.locationUrl){
              console.log(i.locationUrl)
              location.href=i.locationUrl
            }
          }
        })
      },
      //处理数据
      dealNavList(navList) {
        let obj = {};
        navList.forEach((i) => {
          let k = i.id.substr(0, 3);
          let s = i.id.substr(3);
          if (!s) {
            obj[k] = {
              id: i.id,
              name: i.name,
              icon: i.icon,
              hidden:i.hidden,
              url: i.url ? i.url : null,
              children: []
            }
          } else {
            obj[k].children.push(i);
          }
        });
        for (let i in obj) {
          this.menuList.push(obj[i])
        }
      }
    }
  }
</script>
<style scoped>
.ivu-menu-vertical{
  height: -webkit-fill-available;
}
</style>
